import React, { useState, useEffect, useRef } from 'react';
import MarkdownEditor from './components/MarkdownEditor';
import MarkdownPreview from './components/MarkdownPreview';
import Toolbar from './components/Toolbar';
import type { FileInfo, EditorSettings } from './types';
import { fileUtils, storageUtils } from './utils';

const defaultContent = `# 欢迎使用 zaoText

这是一个功能完整的 Mac 风格 Markdown 编辑器。

## 功能特性

- **实时预览** - 支持分屏显示编辑器和预览
- **语法高亮** - 完整的 Markdown 语法支持
- **主题切换** - 明暗主题自由切换
- **文件管理** - 打开、保存文件
- **导出功能** - 支持导出 HTML 和 PDF
- **快捷键** - 常用快捷键支持
- **图片粘贴** - 支持直接粘贴图片

## 快捷键

- ⌘N - 新建文件
- ⌘O - 打开文件
- ⌘S - 保存文件
- ⌘⇧P - 切换预览模式

## 示例内容

### 代码块

\`\`\`javascript
const greeting = 'Hello, World!';
console.log(greeting);
\`\`\`

### 表格

| 功能 | 描述 | 状态 |
|------|------|------|
| 编辑器 | CodeMirror 6 | ✅ |
| 预览 | Marked.js | ✅ |
| 主题 | 明暗切换 | ✅ |

### 引用

> 这是一个引用示例。Markdown 让文档编写变得简单而优雅。

### 列表

- 无序列表项 1
- 无序列表项 2
  - 嵌套列表项
  - 另一个嵌套项

1. 有序列表项 1
2. 有序列表项 2
3. 有序列表项 3

**开始使用 zaoText 编写你的 Markdown 文档吧！**`;

function App() {
  const [currentFile, setCurrentFile] = useState<FileInfo>({
    name: '未命名.md',
    content: defaultContent,
    saved: true,
  });

  const [settings, setSettings] = useState<EditorSettings>({
    theme: { name: 'light', isDark: false },
    fontSize: 14,
    showLineNumbers: true,
    wordWrap: true,
  });

  const [viewMode, setViewMode] = useState<'editor' | 'preview' | 'split'>('split');
  const fileInputRef = useRef<HTMLInputElement>(null);
  const previewRef = useRef<HTMLDivElement>(null);

  // 从本地存储加载设置
  useEffect(() => {
    const savedSettings = storageUtils.load('editor-settings', settings);
    setSettings(savedSettings);

    // 应用主题
    if (savedSettings.theme.isDark) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }

    // 设置 Electron 菜单事件监听器
    if (window.electronAPI?.isElectron) {
      setupElectronMenuListeners();
    }
  }, []);

  // 保存设置到本地存储
  useEffect(() => {
    storageUtils.save('editor-settings', settings);
  }, [settings]);

  // 快捷键处理
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.metaKey || e.ctrlKey) {
        switch (e.key) {
          case 'n':
            e.preventDefault();
            handleNewFile();
            break;
          case 'o':
            e.preventDefault();
            handleOpenFile();
            break;
          case 's':
            e.preventDefault();
            handleSaveFile();
            break;
          case 'p':
            if (e.shiftKey) {
              e.preventDefault();
              setViewMode(prev => prev === 'preview' ? 'split' : 'preview');
            }
            break;
        }
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [currentFile]);

  const handleContentChange = (content: string) => {
    setCurrentFile(prev => ({
      ...prev,
      content,
      saved: false,
    }));
  };

  const handleNewFile = () => {
    if (!currentFile.saved) {
      const shouldDiscard = window.confirm('当前文件未保存，是否丢弃更改？');
      if (!shouldDiscard) return;
    }

    setCurrentFile({
      name: '未命名.md',
      content: '',
      saved: true,
    });
  };

  const handleOpenFile = () => {
    fileInputRef.current?.click();
  };

  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    try {
      const content = await fileUtils.readFile(file);
      setCurrentFile({
        name: file.name,
        content,
        saved: true,
        path: file.name,
      });
    } catch (error) {
      alert('读取文件失败');
      console.error('File read error:', error);
    }

    // 重置文件输入
    e.target.value = '';
  };

  const handleSaveFile = () => {
    fileUtils.saveFile(currentFile.content, currentFile.name);
    setCurrentFile(prev => ({ ...prev, saved: true }));
  };

  const handleExport = async (format: 'html' | 'pdf' | 'word' | 'print') => {
    console.log(`开始导出 ${format.toUpperCase()}`);

    try {
      if (format === 'html') {
        console.log('生成HTML内容...');
        const html = fileUtils.exportToHTML(currentFile.content);

        // 使用通用下载方式，在所有环境中都应该工作
        const blob = new Blob([html], { type: 'text/html' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = currentFile.name.replace(/\.md$/, '.html');
        a.click();
        URL.revokeObjectURL(url);
        console.log('HTML下载完成');

        // 在桌面环境中显示成功消息
        const isDesktop = window.electronAPI || window.__TAURI__;
        if (isDesktop) {
          alert('HTML导出成功！\n\n文件已保存到下载目录。');
        }
      } else if (format === 'pdf') {
        console.log('开始PDF导出...');

        // 检查预览元素是否存在且有内容
        if (!previewRef.current) {
          alert('请确保预览窗口已打开，然后再尝试导出PDF\n\n建议切换到"分屏模式"或"仅预览"模式');
          return;
        }

        const previewElement = previewRef.current;
        console.log('预览元素:', previewElement);

        // 先尝试找.markdown-body，如果找不到就使用.prose
        let previewContent = previewElement.querySelector('.markdown-body');
        if (!previewContent) {
          previewContent = previewElement.querySelector('.prose');
          console.log('未找到.markdown-body，使用.prose元素:', previewContent);
        } else {
          console.log('找到.markdown-body元素:', previewContent);
        }

        // 如果还是找不到，就直接使用整个预览元素
        if (!previewContent) {
          previewContent = previewElement;
          console.log('未找到适合的子元素，使用整个预览元素');
        }

        if (!previewContent.innerHTML.trim()) {
          alert('请确保预览内容已加载，然后再尝试导出PDF\n\n如果内容为空，请先输入一些文本');
          return;
        }

        console.log('导出元素内容预览:', previewContent.innerHTML.substring(0, 200) + '...');

        await fileUtils.exportToPDF(
          currentFile.content,
          currentFile.name.replace(/\.md$/, '.pdf')
        );
      } else if (format === 'word') {
        console.log('开始Word导出...');

        await fileUtils.exportToWord(
          currentFile.content,
          currentFile.name.replace(/\.md$/, '')
        );
      } else if (format === 'print') {
        console.log('打开打印预览...');

        // 打开打印预览窗口
        fileUtils.openPrintPreview(currentFile.content, currentFile.name);
      } else {
        throw new Error('无效的导出格式');
      }
    } catch (error) {
      console.error(`${format.toUpperCase()}导出失败:`, error);

      let errorMessage = `${format.toUpperCase()}导出失败`;
      if (error instanceof Error) {
        errorMessage += ': ' + error.message;
      }

      alert(errorMessage + '\n\n请检查浏览器控制台获取更多信息');
    }
  };

  const handleToggleTheme = () => {
    const newTheme = {
      name: settings.theme.isDark ? 'light' : 'dark',
      isDark: !settings.theme.isDark,
    };

    setSettings(prev => ({ ...prev, theme: newTheme }));

    if (newTheme.isDark) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  };

  const handleRenameFile = (newName: string) => {
    setCurrentFile(prev => ({
      ...prev,
      name: newName,
      saved: false, // 标记为未保存，因为文件名发生了变化
    }));
  };

  const handleImagePaste = (imageDataUrl: string, fileName: string) => {
    // 图片已经在编辑器中插入，这里只需要标记文件为未保存状态
    setCurrentFile(prev => ({
      ...prev,
      saved: false,
    }));
  };

  // 设置 Electron 菜单事件监听器
  const setupElectronMenuListeners = () => {
    const electronAPI = window.electronAPI;
    if (!electronAPI) return;

    // 新建文件
    electronAPI.onMenuNewFile(() => {
      handleNewFile();
    });

    // 打开文件
    electronAPI.onMenuOpenFile((event: any, data: any) => {
      setCurrentFile({
        name: data.fileName,
        content: data.content,
        saved: true,
        path: data.filePath,
      });
    });

    // 保存文件
    electronAPI.onMenuSaveFile(() => {
      if (currentFile.path) {
        handleSaveToPath(currentFile.path);
      } else {
        handleSaveAs();
      }
    });

    // 另存为
    electronAPI.onMenuSaveAs(() => {
      handleSaveAs();
    });

    // 导出 HTML
    electronAPI.onMenuExportHTML(() => {
      handleExport('html');
    });

    // 导出 PDF
    electronAPI.onMenuExportPDF(() => {
      handleExport('pdf');
    });

    // 视图模式切换
    electronAPI.onMenuViewMode((event: any, mode: any) => {
      setViewMode(mode as 'editor' | 'preview' | 'split');
    });

    // 主题切换
    electronAPI.onMenuToggleTheme(() => {
      handleToggleTheme();
    });
  };

  // 保存到指定路径
  const handleSaveToPath = async (filePath: string) => {
    if (window.electronAPI) {
      const result = await window.electronAPI.saveFile(filePath, currentFile.content);
      if (result.success) {
        setCurrentFile(prev => ({ ...prev, saved: true, path: filePath }));
      } else {
        alert('保存文件失败：' + result.error);
      }
    }
  };

  // 另存为
  const handleSaveAs = async () => {
    if (window.electronAPI) {
      const result = await window.electronAPI.saveFileDialog(currentFile.name);
      if (!result.canceled && result.filePath) {
        await handleSaveToPath(result.filePath);
      }
    } else {
      // Web 环境下的处理
      handleSaveFile();
    }
  };

  return (
    <div className="h-screen flex flex-col bg-white dark:bg-gray-900">
      <Toolbar
        onNewFile={handleNewFile}
        onOpenFile={handleOpenFile}
        onSaveFile={handleSaveFile}
        onExport={handleExport}
        onToggleTheme={handleToggleTheme}
        onToggleView={setViewMode}
        onRenameFile={handleRenameFile}
        isDark={settings.theme.isDark}
        currentView={viewMode}
        fileName={currentFile.name}
        isSaved={currentFile.saved}
      />

      <div className="flex-1 flex overflow-hidden">
        {(viewMode === 'editor' || viewMode === 'split') && (
          <div className={`${viewMode === 'split' ? 'w-1/2' : 'w-full'} border-r border-gray-200 dark:border-gray-700`}>
            <MarkdownEditor
              content={currentFile.content}
              onChange={handleContentChange}
              isDark={settings.theme.isDark}
              onImagePaste={handleImagePaste}
              className="h-full"
            />
          </div>
        )}

        {(viewMode === 'preview' || viewMode === 'split') && (
          <div ref={previewRef} className={`${viewMode === 'split' ? 'w-1/2' : 'w-full'}`}>
            <MarkdownPreview
              content={currentFile.content}
              className="h-full"
            />
          </div>
        )}
      </div>

      {/* 隐藏的文件输入 */}
      <input
        ref={fileInputRef}
        type="file"
        accept=".md,.markdown,.txt"
        onChange={handleFileSelect}
        className="hidden"
      />
    </div>
  );
}

export default App;
